<script setup lang="ts">
import { useRouter } from "vue-router";
const router= useRouter();

const toPage = ()=> {
  router.push({
    name: 'Home'
  });
}
</script>

<template>
  <div class="header">
    <div class="header-container">
      <img @click="toPage" class="logo" src="~@imgs/logo.png" alt="logo" />
      <div class="right">
        <div>
          <router-link :to="{ name: 'Home', hash: '#jianjie' }">公司简介</router-link>
        </div>
        <div>
          <router-link :to="{ name: 'Home', hash: '#dongtai' }">公司动态</router-link>
        </div>
        <div>
          <router-link :to="{ name: 'Home', hash: '#product' }">公司产品</router-link>
        </div>
        <div>
          <router-link :to="{ name: 'Home', hash: '#case' }">精彩案例</router-link>
        </div>
        <div>
          <router-link :to="{ name: 'Home', hash: '#about' }">关于鸿生</router-link>
        </div>
        <div>
          <router-link :to="{ name: 'Home', hash: '#joinus' }">加入我们</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  position: fixed;
  height: 92px;
  z-index: 22;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient( 180deg, #3A67C5 0%, #778FD6 100%);
  &-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    width: $page-width;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      height: 67px;
    }
    .right {
      display: flex;
      flex-direction: row;
      div {
        cursor: pointer;
        font-weight: 400;
        margin-right: 55px;
        font-size: 30px;
        color: #F3E0B1;
        line-height: 40px;
        text-align: left;
        font-style: normal;

        &:last-child {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>
